<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery + Vue test</title>

  <!-- 详见 https://www.bootcdn.cn/ -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

  <script type="text/javascript" src="../_js/vue.min.js"></script>

  <style>
    #log{
      height: 200px;
      width: 400px;
      margin-top: 10px;
      /* border-color: #f70; */
    }
  </style>
</head>
<body>
  <div id="root">
    <span> JQuery + Vue Test: </span>
    <br>
    <button @click="doJQueryGet">jQuery-Get</button>
    <button @click="doJQueryPost">jQuery-Post</button>
    <button @click="doJQuery">jQuery (normal-AJAX)</button>
    <br>
    <textarea id="log" ref="log">Logging Message</textarea>

    <hr>
    <div>get message from Vue: {{message}}</div>
  </div>

  <script type="text/javascript">

  //var $log = $('#log')

  Vue.config.productionTip = false

  const vm = new Vue({
    el: '#root',
    data: {
      message: 'Are you OK?',
      emps: [
        {id: 1, name: 'Jack', age: 18},
        {id: 2, name: 'Rose', age: 22},
        {id: 3, name: 'White', age: 11}
      ],
      point: {
        x: 0,
        y: 0
      }
    },
    methods: {
      doJQueryGet() {
        console.log('click jQuery-Get')
        $.get('https://jsonplaceholder.typicode.com/todos/10',
        {
          title: 'Test',
          other: 'Other',
          tag: 9
        },
        (data) => {
          //注意：这里箭头函数的this才是指向vue实例，普通函数将会指向jQuery
          this.$refs.log.value = JSON.stringify(data)  //JQuery and Vue will conflict when using normal function
          //$log.val(JSON.stringify(data))             //有冲突了，不能工作
          console.log('response by jQuery GET:', data)
        })
      },
      doJQueryPost() {
        console.log("click jQuery-Post")
        $.post('https://jsonplaceholder.typicode.com/posts',
          {title: "post test", age: 23},
          (data) => {
            //注意：这里箭头函数的this才是指向vue实例，普通函数将会指向jQuery
            this.$refs.log.value = JSON.stringify(data)  //JQuery and Vue will conflict when using normal function
            //$log.val(JSON.stringify(data))             //有冲突了，不能工作
            console.log('response by jQuery POST:', data)
          },
          'json'
        )
      },
      doJQuery() {
        console.log('click jQuery (normal)')
        $.ajax({
          url: 'https://jsonplaceholder.typicode.com/todos/10',
          data: {name: 'Normal jQuery', age: 44},
          headers: {book: 'The world', price: 88.76, pages: 99},
          type: 'GET',
          timeout: 1000,
          success: (data) => {
            //注意：这里箭头函数的this才是指向vue实例，普通函数将会指向jQuery
            this.$refs.log.value = JSON.stringify(data)  //JQuery and Vue will conflict when using normal function
            //$log.val(JSON.stringify(data))             //有冲突了，不能工作
            console.log('reponse by normal jQuery.ajax call', data)
          },
          error: function(err){
            console.log('error', err)
          }
        })
      }
    }
  })

  //jQuery event test
  $('span').click(function(){
    console.log("click span")
  })
  </script>
</body>
</html>